<template>
  <div class="setButtonWrap">
    <i @click='dialogFormVisibleAdd = true' class="iconfont icon-bianji1"></i>
    <el-dialog :close-on-click-modal="false" @opened="$store.commit('dialogTop')" :append-to-body="true" title="编辑用户" :visible.sync="dialogFormVisibleAdd" @close="resetForm('ruleFormAdd')" @open="dialogOpen">
      <el-form :model="ruleFormAdd" :rules="rulesAdd" ref="ruleFormAdd" label-width="80px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="account" :rules="[{ 'required':true, 'message': '请输入用户名', }]">
          <el-input readonly size="small" :maxlength="20" v-model="ruleFormAdd.account" placeholder="用户名"></el-input>
        </el-form-item>
        <!--<el-form-item label="重置密码" prop="password" required>
          <el-input size="small" :maxlength="20" v-model="ruleFormAdd.password" type="password" placeholder="输入密码"></el-input>
        </el-form-item>-->
        <el-form-item label="用户权限" prop="roleLevel" :rules="[{ 'required':true, 'message': '请选择用户权限', }]">
          <el-radio-group v-model="ruleFormAdd.roleLevel" @change="getRoleList(0)">
            <el-radio label="1">管理员</el-radio>
            <el-radio  label="2">普通用户</el-radio>
          </el-radio-group>

        </el-form-item>
        <el-form-item label="用户角色" prop="roleId" :rules="[{ 'required':true, 'message': '请选择用户角色', }]">
          <el-select v-model="ruleFormAdd.roleId" size="small" clearable placeholder="用户角色">
            <el-option
              v-for="item in newRoleList"
              :key="item.roleId"
              :label="item.roleName"
              :value="item.roleId">
            </el-option>
          </el-select>

        </el-form-item>
        <!-- <el-form-item label="所属部门" prop="department" :rules="{required: true, message: '所属部门不能为空',  }">
          <el-input size="small" :maxlength="50" v-model="ruleFormAdd.department"
                    placeholder="所属部门"></el-input>
        </el-form-item> -->


        <el-form-item label="联系人" prop="userName" :rules="[{ 'required':true, 'message': '请输入联系人', }]">
          <el-input size="small" :maxlength="20" v-model="ruleFormAdd.userName"
                    placeholder="联系人"></el-input>

        </el-form-item>
        <el-form-item label="联系电话" prop="mobile" required>
          <el-input size="small" :maxlength="20" v-model="ruleFormAdd.mobile"
                    placeholder="手机号码"></el-input>

        </el-form-item>
        <el-form-item label="联系邮箱" prop="email" required>
          <el-input size="small" :maxlength="50" v-model="ruleFormAdd.email"
                    placeholder="联系邮箱"></el-input>

        </el-form-item>
        <el-form-item label="用户状态" prop="userStatus" :rules="[{ 'required':true, 'message': '请选择用户状态', }]">
          <el-radio v-model="ruleFormAdd.userStatus" :label="1">启用</el-radio>
          <el-radio v-model="ruleFormAdd.userStatus" :label="2">停用</el-radio>
          <!--<el-radio v-model="ruleFormAdd.userStatus" :label="0">废除</el-radio>-->
        </el-form-item>
        <div style="text-align: center;margin: 20px 0 10px 0 ;">

          <el-button size="small" @click="dialogFormVisibleAdd = false">取 消</el-button>
          <el-button type="primary" @click="submitForm('ruleFormAdd')">提交</el-button>
        </div>

      </el-form>

    </el-dialog>
  </div>
</template>

<script>

  export default {
    props: ["roleList","editInfo"],
    data () {
      var phoneCheck = (rule, value, callback) => {
        var phnum = /^1[3456789]{1}\d{9}$/
        if (value === '') {
          callback(new Error('手机号码不能为空'));
        } else if (!phnum.exec(Number(value))) {
          callback(new Error('请正确输入手机号！'));
        } else {
          callback();
        }
      };
      var mailCheck = (rule, value, callback) => {
        var isMail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
        if (value === '') {
          callback(new Error('邮箱不能为空'));
        } else if (!isMail.exec(value)) {
          callback(new Error('请正确输入邮箱地址！'));
        } else {
          callback();
        }
      };

      var passwordCheck = (rule, value, callback) => {
        var pwd = /(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*?]+)$)^[\w~!@#$%\^&*?]{6,}$/;
        if (!value) {
          return callback(new Error('请输入密码'));
        } else if (!pwd.exec(value)) {
          callback(new Error('密码至少6位数并包含数字和字母'));
        } else {
          callback();
        }
      };
     /* var passwordsureCheck = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('确认密码不能为空'));
        } else if (!(this.ruleFormAdd.password === value)) {
          callback(new Error('两次密码输入不一致'));
        } else {
          callback();
        }
      };*/
      return {
        options: [
          {name:"市交通局",value:"1"},
          {name:"市交警局",value:"2"},
          {name:"市城管局",value:"3"},
          {name:"各区政府",value:"4"},
          ],
        ruleFormAdd: {
          "sysUserId": "",
          "account": "",
          "roleLevel": 1,
          "userName": "",
          "mobile": "",
          "email": "",
          "department": "",
          "userStatus": 1,
          "roleId":""
        },
        newRoleList: [],
        dialogFormVisibleAdd: false,
        rulesAdd: {
          mobile: [
            {required: true,  validator: phoneCheck,}
          ],
          email: [
            {required: true,  validator: mailCheck,}
          ],
          password: [
            {required: true,  validator: passwordCheck,}
          ],
          /*passwordSure: [
            {required: true, validator: passwordsureCheck,}
          ]*/
        }
      }
    },
    created(){

    },
    components: {},
    methods: {
      getRoleList(key){
        if(key!=1){
          this.ruleFormAdd.roleId=""
        }
        this.newRoleList=[]
        setTimeout(()=>{
          this.roleList.forEach(item=>{
            if(this.ruleFormAdd.roleLevel==item.roleLevel&&item.roleStatus==1){
              this.newRoleList.push(item)
            }
          })
        },100)
      },
      dialogOpen(){
        for(let i in this.ruleFormAdd){
          this.ruleFormAdd[i]=this.editInfo[i]
        }
        this.ruleFormAdd.roleLevel=this.ruleFormAdd.roleLevel+""
        this.getRoleList(1)
      },
      //提交回调
      handleDiaSureAdd(){
        this.axios.post(process.env.API_HOST + '/system/updateSysUser',this.ruleFormAdd)
          .then(response => {
            if (response.data.code == 200) {
              this.$message({
                type: 'success',
                message: '编辑成功!'
              });
              this.dialogFormVisibleAdd = false
              this.$emit('searchRowsInfo')
            }

          })
          .catch(error => {
            console.log(error);
          });
      },

      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.handleDiaSureAdd()
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"
  .setButtonWrap
    display inline-block


</style>
